<template>
  <footer class="footer">
    <!-- This should be `0 items left` by default -->
    <span class="todo-count"
      ><strong>{{ unDoneList }}</strong> item left</span
    >
    <!-- Remove this if you don't implement routing -->
    <ul class="filters" @click="$emit('show-todo',type)">
      <li>
        <a :class="{ selected: (type ==='all') }" href="#/" @click="type='all'">All</a>
      </li>
      <li>
        <a href="#/active" :class="{ selected: (type === 'no') }" @click="type='no'">Active</a>
      </li>
      <li>
        <a href="#/completed" :class="{ selected: (type === 'yes') }" @click="type='yes'">Completed</a>
      </li>
    </ul>
    <!-- Hidden if no completed items are left ↓ -->
    <button class="clear-completed" v-if="hasDoneTodo" @click="clearFn">Clear completed</button>
  </footer>
</template>

<script>
export default {
  props: ["list"],
  computed: {
    unDoneList() {
      return this.list.filter((item) => item.isDone == false).length;
    },
    hasDoneTodo(){
      return this.list.some(item=>item.isDone===true)
    }
  },
  data() {
    return {
      type: "all", //自定义规则 控制样式添加all ye no
    };
  },
  methods: {
    clearFn(){
      this.$emit("clearDoList")
    }
  }
};
</script>

<style>
</style>